<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				background-color: pink;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box" style="width: 200px;">

		</div>
		<script type="text/javascript">
			//offset与style的区别
			/**
			 * offset
			 * 1.offset可以得到任意样式表中的样式值
			 * 2.offset系列获得的数值是没有单位的
			 * 3.offsetWidth包含padding+border+width
			 * 4.offsetWidth等属性是只读属性,只能获取不能赋值
			 * 所以,我们要获取元素的大小位置,用offset更合适
			 * 
			 * style
			 * 1.style只能得到行内样式表中的样式值
			 * 2.style.width获得的是带有单位的字符串
			 * 3.style.width获得的是不包含padding和border的宽度值
			 * 4.style.width是只读写属性,可以获取也可以赋值
			 * 所以我们要给元素修改值,则需要修改style值
			 * 
			 */
			var box = document.querySelector(".box");
			console.log(box.style.width);
			console.log(box.offsetWidth);
		</script>
	</body>
</html>
